<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>{{title}}</title>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<!--浏览器渲染设置-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<!--各平台个性化视觉设置(自行补充)-->
<link rel="shortcut icon" type="image/x-icon" href="../static/common/brower/favicon.ico"/>
<link rel="apple-touch-icon-precomposed" href="../static/common/brower/apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="../static/common/brower/apple-touch-icon.png">
<!--移动端特性设置-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="My WebAPP">
<!--项目全局CSS资源引用-->
<link rel="stylesheet" href="../../static/lib/jqueryP/rui/rui.min.css" />
<link rel="stylesheet" href="../../static/common/common.css" />
<!--项目全局JS资源引用-->
<script src="../../static/require.js"></script>
<script src="../../static/requireConfig.js"></script>
<!-- --------------------------------页面模板公用头部结束-------------------------------- -->
<style type="text/css">

</style>
</head>
<body>

<div class="pageHeader">
	<h3>饼图</h3>
</div>


<div class="pageBody">
	<div id="container" style="min-width:700px;height:400px"></div>
</div>


<!--当前页面私有JS-->
<script type="text/javascript">
	require(['common', 'highchart'], function(){
		$('#container').highcharts({
	        chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false
	        },
	        title: {
	            text: 'Browser market shares at a specific website, 2010'
	        },
	        tooltip: {
	    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	        },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: 'pointer',
	                dataLabels: {
	                    enabled: true,
	                    color: '#000000',
	                    connectorColor: '#000000',
	                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
	                }
	            }
	        },
	        series: [{
	            type: 'pie',
	            name: 'Browser share',
	            data: [
	                ['Firefox',   45.0],
	                ['IE',       26.8],
	                {
	                    name: 'Chrome',
	                    y: 12.8,
	                    sliced: true,
	                    selected: true
	                },
	                ['Safari',    8.5],
	                ['Opera',     6.2],
	                ['Others',   0.7]
	            ]
	        }]
	    });
	})
</script>
<!-- --------------------------------页面模板公用底部开始-------------------------------- -->
</body>
</html>